<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">Dialog - Ajax Form</h1>
        <div class="entry">
            <p>Dialogs can contain forms to provide ajax interaction.</p>

            <p:commandButton id="showDialogButton" type="button" value="Show" onclick="PF('dlg').show()" />

            <p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false">
                <h:form id="form">

                    <h:panelGrid columns="2" style="margin-bottom:10px">
                        <h:outputLabel for="firstname" value="Firstname:" />
                        <p:inputText id="firstname" value="#{pprBean.firstname}" />
                    </h:panelGrid>

                    <p:commandButton id="submitButton" value="Submit" update=":display" oncomplete="PF('dlg').hide();"/>

                </h:form>
            </p:dialog>

            <p:outputPanel id="display" style="display:block;margin-top:10px;">
                <h:outputText id="name" value="Hello #{pprBean.firstname}" rendered="#{not empty pprBean.firstname}"/>
            </p:outputPanel>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="dialogForm.xhtml">
                    <pre name="code" class="xml">
&lt;p:commandButton id="showDialogButton" type="button" value="Show" onclick="PF('dlg').show()" /&gt;
		
&lt;p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false"&gt;
	&lt;h:form id="form"&gt;

		&lt;h:panelGrid columns="2" style="margin-bottom:10px"&gt;
			&lt;h:outputLabel for="firstname" value="Firstname:" /&gt;
			&lt;p:inputText id="firstname" value="\#{pprBean.firstname}" /&gt;
		&lt;/h:panelGrid&gt;

		&lt;p:commandButton id="submitButton" value="Submit" update=":display" oncomplete="PF('dlg').hide();"/&gt;
			
	&lt;/h:form&gt;
&lt;/p:dialog&gt;
	
&lt;p:outputPanel id="display" style="display:block;margin-top:10px;"&gt;
	&lt;h:outputText id="name" value="Hello \#{pprBean.firstname}" rendered="\#{not empty pprBean.firstname}"/&gt;
&lt;/p:outputPanel&gt;
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>